<template>
	<el-container class="page-container">
		<el-main class="editor-main">
			<div ref="tableContainer" class="table-container"></div>
		</el-main>
	</el-container>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as VTableSheet from '@visactor/vtable-sheet';
import * as VTablePlugins from '@visactor/vtable-plugins';

const tableContainer = ref(null);
let sheetInstance = null;


// ✅ 统一的复选框样式函数
function setCheckboxStyle(checkbox) {
	checkbox.style.cssText = `
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 10px 0 0 !important;
    opacity: 1 !important;
    position: relative !important;
    top: 2px !important;
    cursor: pointer !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
  `;
}
// ✅ 监听 DOM 变化并设置所有复选框样式
function observeAndStyleCheckboxes() {
	// 初始设置所有复选框
	document.querySelectorAll('input[type="checkbox"]').forEach(setCheckboxStyle);
	// 🔄 监听 DOM 变化，处理动态加载的复选框
	const observer = new MutationObserver((mutations) => {
		mutations.forEach((mutation) => {
			mutation.addedNodes?.forEach((node) => {
				if (node.nodeType === Node.ELEMENT_NODE) {
					// 检测直接添加的复选框
					if (node.matches('input[type="checkbox"]')) {
						setCheckboxStyle(node);
					}
					// 检测子元素中的复选框
					node.querySelectorAll?.('input[type="checkbox"]').forEach(setCheckboxStyle);
				}
			});
		});
	});
	// 📡 监听整个 body 的变化
	observer.observe(document.body, {
		childList: true,  // 监听子元素变动
		subtree: true,    // 递归检查所有子节点
	});
}

onMounted(() => {



	// 确保容器已渲染
	if (tableContainer.value) {
		sheetInstance = new VTableSheet.VTableSheet(tableContainer.value, {
			VTablePluginModules: [
				{ module: VTablePlugins.TableExportPlugin },
				{ module: VTablePlugins.ExcelImportPlugin },
			],
			mainMenu: {
				show: true,
				items: [
					{ name: '导入', description: '导入数据替换到当前sheet', menuKey: 'import'},
					{ name: '导出',items: [
							{ name: '导出CSV',  description: '导出当前sheet数据',menuKey: 'export-current-sheet-csv'},
							{ name: '导出XLSX', menuKey: 'export-current-sheet-xlsx' },
						] },
					{
						name: '测试',
						description: '测试',
						onClick: () => {
							console.log('测试');
						}
					}
				]
			},
			showFormulaBar: true,
			showSheetTab: true,
			select: { disableSelect: false },
			sheets: [{
				sheetKey: 'filter-demo',
				sheetTitle: '筛选示例',
				filter: { mode: ['byCondition'] },
				columns: [
					{ title: '姓名', field: 'name', width: 100,    filter:false },
					{ title: '年龄', field: 'age', width: 80 },
					{ title: '部门', field: 'dept', width: 100 },
					{ title: '薪资', field: 'salary', width: 100 }
				],
				data: [
					['张三', 25, '技术部', 8000],
					['李四', 30, '产品部', 12000],
					['王五', 28, '技术部', 9500],
					['赵六', 35, '市场部', 15000]
				]
			}] 		});
		observeAndStyleCheckboxes();
	}
});

onBeforeUnmount(() => {

});
</script>

<style scoped>

/* 【关键变化】不再使用 100vh，而是使用 100% */
.page-container {
	/*
	 - 高度被设置为其父元素的 100%。
	 - 这要求其父元素（在 iframe 中通常是 <body> 或一个根 div）必须有一个明确的高度。
	 - position: relative 确保它成为其子元素的定位上下文。
	*/
	height: 100%;
	width: 100%;
	overflow: hidden; /* 防止页面级别滚动 */
	position: relative;
	box-sizing: border-box; /* 推荐，确保 padding/border 不会撑开元素 */
}


/* 【关键变化】高度计算基于父容器 */
.editor-main {
	padding: 0;
	/*
	 高度为父容器（.el-container）的 100%，减去 header 的 60px。
	 因为 .el-container 的高度是 100% - 60px，所以这里可以直接写 100%。
	 为了稳健，我们依然使用 flex 布局来自然分配空间。
	*/
	flex-grow: 1; /* 【推荐】使用 flex-grow: 1 自动填满剩余空间，比 calc 更健壮 */
	overflow: hidden;
	position: relative; /* 为绝对定位的子元素提供参考 */
}

/* 【关键】让 Ace Editor 完全填充其父容器 */
.table-container {
	/* 使用绝对定位填充整个 editor-main，可以避免一些潜在的 flex 或 margin 问题 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* 不需要 overflow 样式，Ace Editor 自己会处理滚动 */
}

/* 深度穿透 >>> 或 ::v-deep 已弃用，改用 :deep() */
:deep(label) input[type="checkbox"] {
	-webkit-appearance: checkbox !important;
	appearance: checkbox !important;
	width: 16px !important;
	height: 16px !important;
	margin-right: 10px !important;
	position: relative !important; /* 防止被定位覆盖 */
	z-index: 1 !important; /* 确保在最上层 */
}
/* 杀死所有可能的伪元素 */
:deep(label) input[type="checkbox"]::before,
:deep(label) input[type="checkbox"]::after {
	content: none !important;
}

</style>
